<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100%;
            height: 150px;
            background-color: red;

            /* 开启弹性布局
                此时在弹性容器里的元素，不再是"块级元素",而是成了弹性元素，此时就可以设置尺寸和边距了。
                在要设置水平排列的元素的父元素，设置flex 
            */
            display: flex;

            /* justify-content:设置水平方向的排列
            弹性元素靠右排列:end 靠左排列:flex-start 居中:center 空白环绕弹性元素space-around 弹性元素环绕空白space-between*/
            justify-content: space-around;

            /* align-items:设置元素垂直方向的排列*/
            align-items: center;

            
        }
        div>span {
            width: 100px;  /* 如果不使用弹性布局，设置宽度和高度无用 */
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
</html>